<template>
  <div class="layout">
    <div class="helpHumanList">
      <div
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
        <Buttons @goBack="goBack()" :buttons="buttons"></Buttons>
      </div>
      <SearchFrame @search="searchResult" tip="职业技能" />
      <div class="selectBar2">
        <div>
          <el-select
            v-model.trim="education"
            placeholder="学历要求"
            size="small"
            style="width: 126px"
            @change="changeEducation"
          >
            <el-option
              v-for="item in educationOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </div>
        <div class="clearBtn" @click="clearSelect">清空筛选条件</div>
      </div>
      <ContainerTitle text="务工人员列表页" :more="false" class="containerTitle"></ContainerTitle>
      <div class="humanListDiv" v-if="migrantWorkerList.length >0">
        <!-- <div class="selectBar">
          <div>
            <el-select
              v-model.trim="education"
              placeholder="学历要求"
              size="small"
              style="width: 150px"
              @change="changeEducation">
              <el-option
                v-for="item in educationOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
          </div>
          <div class="clearBtn" @click="clearSelect">清空筛选条件</div>
        </div> -->
          <HumanFrame
            v-for="(human, index) in migrantWorkerList"
            :human="human"
            :key="human.id"
            :style="index == 9 ? 'border-bottom: 0' : ''"
          />
        
      </div>
      <div class="empty" v-else>
        <PublicImage :src="require('@/assets/image/empty.png')" :originalSize="true"></PublicImage>
        <p>暂无内容</p>
			</div>
      <div id="policyPagination" v-if="migrantWorkerList.length>0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/breadcrumb";
import HumanFrame from "./components/humanFrame";
import SearchFrame from "./components/searchFrame";
//api
import { request } from "@/utils/request.js";
import config from "@/utils/config.js";

import { getEducationSelectList, getMigrantWorkerList } from "@/common/api/help"

export default {
  name: "helpHumanList",
  meta: {
    name: "务工人员列表页",
  },
  components: { Breadcrumb, HumanFrame, SearchFrame },
  data() {
    return {
      buttons:[{text:"返回",type:"normal",size:"s",method:"goBack"}],
      pageNum: 1,
      pageSize: 10,
      total: null,
      education: "", //查询条件：学历要求
      crumbs: [
        { label: "人才服务", value: "help" },
        { label: "务工人员列表页", value: "", choose: true },
      ],
      educationOptions: [],
      migrantWorkerList: [], //务工人员列表
    };
  },
  mounted() {
  	this.getEducationSelectList();
  	this.getMigrantWorkerList();
  },
  // activated() {
  //   this.pageNum = 1
  //   this.$refs.headerBars.setCompanyInfo();
  //   this.$refs.headerBars.isLogin();
  //   this.getEducationSelectList();
  //   this.getMigrantWorkerList();
  // },
  methods: {
    // 搜索结果
    searchResult(res) {
      this.skill = res
      this.getMigrantWorkerList();
    },
    // 获取学历要求下拉列表
    async getEducationSelectList() {
      const { code, msg, data } = await getEducationSelectList();
      if (code != "200") return this.$message.warning(msg);
      this.educationOptions = data.worker_education;
    },
    // 下拉改变学历
    changeEducation(val) {
      this.education = val;
      this.getMigrantWorkerList();
    },
    // 清空筛选条件 - 学历不限置空
    clearSelect() {
      this.education = "";
      this.getMigrantWorkerList();
    },
    // 获取列表数据
    async getMigrantWorkerList() {
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        education: this.education != 0 ? this.education : "",
        skill: this.skill
      };
      const { code, msg, rows, total } = await getMigrantWorkerList(data)
      if (code != "200") return this.$message.warning(msg);
      this.migrantWorkerList = rows;
      this.total = total;
    },
    /**
     * 返回上一页
     */
    goBack: function () {
      // this.$router.back();
      this.$router.replace({ path: "/help" });
    },
    /**
     * 改变页面大小事件
     */
    handleSizeChange: function (e) {
      this.pageSize = e;
      this.getMigrantWorkerList();
    },
    /**
     * 换页事件
     */
    handleCurrentChange: function (e) {
      this.pageNum = e;
      this.getMigrantWorkerList();
    },
  },
};
</script>

<style lang="scss" scoped>
.empty{
	text-align: center;
	img{
		width: 312px;
    height: 185px;
		object-fit: cover;
	}
	p{
		font-size: 14px;
    color: #666;
	}
}
.selectBar2 {
  width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .clearBtn {
    width: 120px;
    height: 32px;
    line-height: 32px;
    background-color: #ffffff;
    // padding: 5px 15px;
    font-size: 13px;
    border-radius: 3px;
    transition: all 0.2s ease 0s;
    border: 1px solid #eeeeee;
    color: #606266;
    margin-left: 20px;
  }
  .clearBtn:hover {
    cursor: pointer;
    box-shadow: 0px 0px 5px #eeeeee;
  }
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 170px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.helpHumanList {
  width: 1000px;
  margin: 0 auto;
}

.helpHumanList .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.helpHumanList .backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.helpHumanList .title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #045db9;
  border-bottom: 2px solid #045db9;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.humanListDiv {
  border: 1px solid #eeeeee;
  margin-bottom: 15px;
}

.humanListDiv .selectBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f4f4f4;
  padding: 10px;
}

.humanListDiv .selectBar .clearBtn {
  background-color: #ffffff;
  padding: 5px 15px;
  font-size: 13px;
  border-radius: 3px;
  transition: all 0.2s ease 0s;
  border: 1px solid #eeeeee;
}

.humanListDiv .selectBar .clearBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

::v-deep.humanListDiv .selectBar .el-input__inner {
  border-radius: 0;
}

#policyPagination {
  text-align: right;
  margin-bottom: 30px;
}
</style>
